var xmlHttp;
var oPopup;
var oInputField;
var oTable;
var oTableBody;
var showFlag = false;
var dataReady = false;
var oInputValue = "";
/**
 *iPopupDiv 弹出区的DIV的ID
 *iInputBudy 输入框的ID
 *oDataUrl 访问数据的URL
 */
function SuggestList(iPopupDiv,iInputBudy,oDataUrl){
	oInputField = document.getElementById(iInputBudy);
	oInputField.attachEvent('onblur',unPopup);
	oInputField.attachEvent('onkeyup',popup);
	oPopup = document.getElementById(iPopupDiv);
	oTable = document.createElement("table");
	if(oInputField.width){
		oTable.width = oInputField.width;
	}else if(oInputField.style.width){
		oTable.width = oInputField.style.width;
	}
	oTableBody = document.createElement("tbody");
	oTable.style.background="#ffffff";
	oTable.appendChild(oTableBody);
	oPopup.appendChild(oTable);
	
	createXMLHttpRequest();
	xmlHttp.open("GET", oDataUrl, true);
	xmlHttp.onreadystatechange = ready;
	xmlHttp.send(null);
}
function ready(){
	dataReady = true;
}
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
}
function unPopup() {
	if (showFlag == false) {
		oPopup.style.display = "none";
	}
}
function popup() {
	clear();
	oPopup.style.display = "none";
	if (oInputField.value.length > 0) {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				try {
					var contents = xmlHttp.responseXML.getElementsByTagName("content")
					setOffsets();
					var oRow, oCell;
					var size = contents.length;
					if(size >10) size=10;
					for (var i = 0; i < size; i++) {
						var content = contents[i];
						//取得子节点内容，重新装载为数组
						var nextNode = content.getElementsByTagName("name")[0].firstChild.data;
						var lastValue = oInputField.value.replace(oInputValue,"");
						var aInputValue = oInputValue.split(",");
						var bExist = false;
						for(var a=0;a<aInputValue.length;a++){
							if(aInputValue[a] == nextNode){
								bExist = true;
							}
						}
						if(bExist) continue;
						if(nextNode.indexOf(lastValue) == 0){//做一个like value% 比较
							//创建tr，td，span元素
							oRow = document.createElement("tr");
							oCell = document.createElement("td");
							//设置cell属性
							oCell.onmouseout = function () {
								this.className = "mouseOut";
								showFlag = false;
							};
							oCell.onmouseover = function () {
								this.className = "mouseOver";
								showFlag = true;
							};
							oCell.setAttribute("border", "0");
							oCell.onclick = function () {
								populateName(this);
							};
							//将nextNode添加到td
							var txtName = document.createTextNode(nextNode);
							oCell.appendChild(txtName);
									//装载隐藏数据到span元素
							oRow.appendChild(oCell);
							oTableBody.appendChild(oRow);
							oPopup.style.display = "inline";
						}
					}
				}catch (e) {
					unPopup();
				}
			}
		}
	}
}

function keyEvent(e){
	var iekey=event.keyCode; 
	var realkey=String.fromCharCode(event.keyCode);
}

function setOffsets() {
	var end = oInputField.offsetWidth;
	var left = calculateOffsetLeft(oInputField);
	var top = calculateOffsetTop(oInputField) + oInputField.offsetHeight;
	oPopup.style.border = "black 1px solid";
	oPopup.style.position = "absolute";
	oPopup.style.left = left + "px";
	oPopup.style.top = top + "px";
}
function calculateOffsetLeft(field) {
	return calculateOffset(field, "offsetLeft");
}
function calculateOffsetTop(field) {
	return calculateOffset(field, "offsetTop");
}
function calculateOffset(field, attr) {
	var offset = 0;
	while (field) {
		offset += field[attr];
		field = field.offsetParent;
	}
	return offset;
}
function populateName(oCell) {
    //填充数据到web页面，oCell---->td对象
    oInputField.value = oInputValue+oCell.firstChild.nodeValue+",";
    oInputValue = oInputField.value;
	clear();
}
        //清除列表数组
function clear() {
	var ind = oTableBody.childNodes.length;
	for (var i = ind - 1; i >= 0; i--) {
		oTableBody.removeChild(oTableBody.childNodes[i]);
	}
	oPopup.style.border = "none";
}